<template>
  <div class="new-products">
    <FloorHeader :title="$t('newProduct')" :tip="$t('newProductTip')" :link="$t('moreNewProduct')"/>
    <!-- 新品商品 -->
    <Swiper
      class="swiper"
      :indicatorDots="false"
      :outside="true">
      <SwiperItem class="product-container" v-for="(item, index) in goodsSwiperList" :key="index">
        <div class="product-repeat" v-for="(item1, index1) in item" :key="index1">
          <div class="product-item">
            <!-- 商品图片 -->
            <img class="main" :src="item1.listPicUrl" alt="">
            <!-- hover移上去展示的图片 -->
            <img class="hover" :src="item1.scenePicUrl" alt="">
            <!-- 标签 -->
            <div class="prom-tag" :class="{ empty: !item1.promTag }">{{ item1.promTag }}</div>
            <!-- 商品名称 -->
            <div class="product-name">{{ item1.name }}</div>
            <!-- 商品价格 -->
            <div class="product-price">
              <span class="current">{{ $t('priceSymbol') }}{{ item1.retailPrice }}</span>
              <span class="old">{{ $t('priceSymbol') }}{{ item1.counterPrice }}</span>
            </div>
          </div>
        </div>
      </SwiperItem>
    </Swiper>
  </div>
</template>

<script>
import FloorHeader from '@/components/index/FloorHeader'

export default {
  components: {
    FloorHeader
  },

  props: {
    list: {
      type: Array,
      default: () => []
    }
  },

  data () {
    return {
      goodsSwiperList: []
    }
  },

  created () {
    // 当前暂存列表
    let list = []
    let goodsSwiperList = []

    // 将数据每个个分成一组
    this.list.forEach((item, index) => {
      // 将当前数据保存到list列表中
      list.push(item)
      // 如果当前有四个
      if ((index + 1) % 4 === 0 || index === this.list.length - 1) {
        goodsSwiperList.push(list)
        // 清空列表
        list = []
      }
    })
    // 进行赋值操作
    this.goodsSwiperList = goodsSwiperList
  }
}
</script>

<style lang="less" scoped>
@import "./../../styles/variable";
@import "./../../styles/common";

.new-products {
  .swiper {
    height: 344px;
    .product-container {
      display: flex;
      .product-repeat {
        cursor: pointer;
        width: 25%;
        height: 100%;
        text-align: center;
        .product-item {
          width: 256px;
          margin: 0 auto;
          padding-bottom: 10px;
          &:hover {
            img.main {
              display: none;
            }
            img.hover {
              display: block;
            }
          }
          img {
            background: @write;
            display: block;
            width: 100%;
            height: 256px;
            margin-bottom: 10px;
            &.hover {
              display: none;
            }
          }
          .prom-tag {
            background: @bg-tips;
            color: @write;
            height: 20px;
            line-height: 20px;
            padding: 0px 6px;
            margin: 0px auto;
            width: fit-content;
            &.empty {
              background: transparent;
            }
          }
          .product-name {
            font-weight: bold;
            font-size: 14px;
            padding: 10px 0px 10px;
            &:hover {
              color: @font-color-golden;
            }
          }
          .product-price {
            color: @color-warning;
            .current {
              margin-right: 6px;
            }
            .old {
              color: @font-color-grey;
              text-decoration: line-through;
            }
          }
          &:hover {
            background-color: @bg-lightgrey;
            box-shadow: 1px 1px 8px @box-color-light1;
          }
        }
      }
    }
  }
}
</style>
